<template>
  <div class="activities-container">
    <table class="activities-table">
      <thead>
        <tr>
          <th v-for="(header, index) in tableHeaders" :key="index">
            {{ header }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(activity, index) in activities" :key="index">
          <td>
            <div class="activity-type">
              <div class="type-icon" :class="getTypeClass(activity.type)">
                <i :class="getTypeIcon(activity.type)"></i>
              </div>
              <div class="type-info">
                <div class="type-title">{{ activity.title }}</div>
                <div class="type-content">{{ activity.content }}</div>
              </div>
            </div>
          </td>
          <td>{{ formatTime(activity.time) }}</td>
          <td>
            <span class="activity-id">#{{ activity.id }}</span>
          </td>
          <td>
            <i class="iconfont icon-more" @click="showActions(index)"></i>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "RecentActivities",
  props: {
    activities: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      tableHeaders: ["活动内容", "时间", "ID", "操作"]
    };
  },
  methods: {
    formatTime(timeString) {
      return new Date(timeString).toLocaleString("zh-CN", {
        year: "numeric",
        month: "2-digit",
        day: "2-digit",
        hour: "2-digit",
        minute: "2-digit"
      });
    },
    getTypeClass(type) {
      return `type-${type}`;
    },
    getTypeIcon(type) {
      const iconMap = {
        news: "iconfont icon-news",
        product: "iconfont icon-product"
      };
      return iconMap[type] || "iconfont icon-default";
    },
    showActions(index) {
      console.log(`Show actions for activity at index ${index}`);
      // 实际实现中可以显示操作菜单
    }
  }
};
</script>

<style scoped>
.activities-container {
  background-color: var(--v-card-bg);
  border-radius: var(--v-card-radius);
  box-shadow: var(--v-shadow);
  padding: 20px;
  margin-top: 30px;
  transition: all 0.3s;
}

.activities-table {
  width: 100%;
  border-collapse: collapse;
}

.activities-table th {
  text-align: left;
  padding: 12px 16px;
  color: var(--v-text-lighter);
  font-weight: 500;
  font-size: 14px;
}

.activities-table td {
  padding: 16px;
  border-bottom: 1px solid var(--v-border-color);
}

.activity-type {
  display: flex;
  align-items: center;
}

.type-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

.type-news {
  background-color: rgba(99, 102, 241, 0.1);
  color: var(--v-theme);
}

.type-product {
  background-color: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.type-info {
  display: flex;
  flex-direction: column;
}

.type-title {
  font-weight: 500;
  color: var(--v-text-darker);
}

.type-content {
  font-size: 13px;
  color: var(--v-text-light);
  margin-top: 4px;
}

.activity-id {
  font-size: 13px;
  color: var(--v-text-light);
}

.icon-more {
  color: var(--v-text-light);
  cursor: pointer;
  font-size: 16px;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.icon-more:hover {
  background-color: #f5f5f5;
  color: var(--v-theme);
}
</style>